<template>
  <div class="app-container calendar-list-container">
    <div v-if="managerTypes !== 1" style="margin:10px 0 20px;">
     
      <strong style="color:#409EFF;font-size:18px;margin:0 30px;">当前可提现：{{balance+'元'}}</strong>
      <el-button type="primary" v-waves @click="dialog1.cash = true">申请提现</el-button>
    </div>
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <div style="display:inline-block;font-size:15px;">订单编号：</div>
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.orderNo"
        style="width: 200px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入订单编号"
      />
      <div style="display:inline-block;font-size:15px;">支付流水号：</div>
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.outTradeNo"
        style="width: 200px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入支付流水号"
      />
      <div style="display:inline-block;font-size:15px;">持卡人姓名：</div>
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.realName"
        style="width: 200px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入持卡人姓名"
      />
      <div style="display:inline-block;font-size:15px;">联系方式：</div>
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.phoneNumber"
        style="width: 200px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入联系方式"
      />
      <br>
      <div style="display:inline-block;font-size:15px;">银行名字：</div>
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.bankName"
        style="width: 200px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入银行名字"
      />
      <div style="display:inline-block;font-size:15px;">订单状态：</div>
      <el-select
        v-model="listQuery.status"
        placeholder="请选择订单状态"
        clearable
        class="filter-item"
        style="width: 200px;margin-right:15px;margin-top:7px"
      >
        <el-option label="审核中" value="1"></el-option>
        <el-option label="通过" value="2"></el-option>
        <el-option label="驳回" value="3"></el-option>
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >查找</el-button>
      <el-button
        type="primary"
        class="filter-item"
        @click="handleDownload"
        icon="el-icon-download"
        :loading="downloadLoading"
      >导出</el-button>
    </div>
    <!-- table 表格 -->
    <el-table
      :data="list"
      v-loading="loading.list"
      element-loading-text="给我一点时间"
      border
      fit
      style="width: 100%"
    >
      <el-table-column label="序号" prop="index" align="center" width="80px"/>
      <el-table-column label="订单编号" prop="orderNo" align="center"/>
      <el-table-column label="支付流水号" prop="outTradeNo" align="center"/>
      <el-table-column label="持卡人姓名" prop="realName" align="center"/>
      <el-table-column label="联系方式" prop="phoneNumber" align="center"/>
      <el-table-column label="所属银行" prop="bankName" align="center"/>
      <el-table-column label="所属支行" prop="branchName" align="center"/>
      <el-table-column label="银行卡号" prop="bankNumber" align="center"/>
      <el-table-column label="交易金额" prop="amount" align="center"/>
      <el-table-column label="订单状态" prop="statusLabel" align="center"/>
      <el-table-column label="驳回理由" prop="nayReason" align="center"/>
      <el-table-column label="创建时间" prop="cTime" align="center"/>
      <el-table-column label="操作"  v-if="managerTypes == 1" class-name="small-padding fixed-width" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            v-if="scope.row.status == 1"
            @click="changeStatus(scope.row.orderId,2)"
            style="margin-left: 10px;"
          >通过</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.status == 1"
            @click="editor(scope.row)"
            style="margin-top: 5px;"
          >驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.offset"
        :page-sizes="[10, 20, 30, 40, 100, 200, 500, 900]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 提现弹框 -->
    <el-dialog title="申请提现" :visible.sync="dialog1.cash">
      <el-form
        :model="addQuery"
        :rules="addRules"
        ref="addForm"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="提现金额" prop="amount">
          <el-input clearable v-model="addQuery.amount" placeholder="请输入提现金额" type="number"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankNumber">
          <el-input clearable v-model="addQuery.bankNumber" placeholder="银行卡号" type="number"></el-input>
        </el-form-item>
        <el-form-item label="持卡人姓名" prop="realName">
          <el-input clearable v-model="addQuery.realName" placeholder="持卡人姓名" ></el-input>
        </el-form-item>
        <el-form-item label="开户行" prop="bankName">
          <el-input clearable v-model="addQuery.bankName" placeholder="开户行" ></el-input>
        </el-form-item>
        <el-form-item label="开户行支行" prop="branchName">
          <el-input clearable v-model="addQuery.branchName" placeholder="开户行支行" ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phoneNumber">
          <el-input clearable v-model="addQuery.phoneNumber" placeholder="联系方式 " ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog1.cash = false">取消</el-button>
        <el-button type="primary" :loading="loading.add" @click="applyCash">确定</el-button>
      </div>
    </el-dialog>
    <!-- 驳回理由 弹框 -->
    <el-dialog title="驳回理由" :visible.sync="dialog1.add">
      <el-form
        :model="addQuery"
        :rules="addRules"
        ref="addForm"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="驳回理由" prop="amount">
          <el-input clearable v-model="bindext.nayReason" placeholder="请输入驳回理由" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="dialog1.add = false">取消</el-button>
        <el-button type="primary" :loading="loading.add" @click="editorApi">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { queryFinance, withdrawal } from "@/api/financial";
import { queryOrderCash, applyDrawal } from "@/api/equipmentOrders";
import { validatePhone } from "@/utils/validate";
import pcq from "@/components/index";
import store from "@/store";
export default {
  name: "agent_list",
  data() {
    var validatePass = (rule, value, callback) => {
      if (!validatePhone(value)) {
        return callback(new Error("请填写正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      total: 0,
      show: false,
      listQuery: {
        offset: 1,
        limit: 10,
        orderNo: "",
        outTradeNo: "",
        realName: "",
        phoneNumber: "",
        bankNumber: "",
        bankName: "",
        status: ""
      },
      list: null,
      loading: {
        list: false,
        add: false
      },
      dialog1: {
        cash: false,
        add: false
      },
      bindQuery: {
        myCommissionRatioint: this.$store._modules.root._children.user.state
          .userInfo.commissionRatioint
      },
      bindext: {
        managerId: "",
        userName: "",
        userAcount: ""
      },
      userInfo: "",
      managerTypes: 0,
      downloadLoading: false,
      balance: 0,
      withdrawal: 0,
      addQuery: {
        money: "",
        bankId: ""
      },
      addRules: {
        amount: [{ required: true, message: "请输入提现金额", trigger: blur }],
        bankNumber: [{ required: true, message: "请输入银行卡号", trigger: blur }],
        realName: [{ required: true, message: "请输入持卡人姓名", trigger: blur }],
        bankName: [{ required: true, message: "请输入开户行", trigger: blur }],
        phoneNumber: [{ required: true, message: "请输入联系方式 ", trigger: blur }],
        branchName: [{ required: true, message: "请输入开户行支行", trigger: blur }]
      },
    };
  },
  components: {
    pcq
  },
  methods: {
    //导出
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "订单编号",
          "支付流水号",
          "持卡人姓名",
          "联系方式",
          "所属银行",
          "所属支行",
          "银行卡号",
          "交易金额",
          "订单状态",
          "驳回理由",
          "创建时间"
        ];
        const filterVal = [
          "orderNo",
          "outTradeNo",
          "realName",
          "phoneNumber",
          "bankName",
          "branchName",
          "bankNumber",
          "amount",
          "statusLabel",
          "nayReason",
          "cTime"
        ];
        const data = this.formatJson(filterVal, this.list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "提现订单列表"
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j];
        })
      );
    },

    //当前总提现金额和可提现金额
    async getAgentBalance() {
      const res = await queryFinance();
      // console.log(res.balance);
      this.balance = res.data.balance;
      this.withdrawal = res.data.withdrawal;
    },
    //获取代理列表
    async getLists() {
      let managerLevel = this.$store._modules.root._children.user.state.userInfo
        .managerLevel;
      this.loading.list = true;
      try {
        const { data } = await queryOrderCash({ ...this.listQuery });
        this.list = data.records.map((item, index) => ({
          index: index + 1,
          ...item,
          statusLabel:
            item.status == 1 ? "审核中" : item.status == 2 ? "通过" : "驳回"
        }));
        this.total = data.total;
      } catch (error) {}
      this.loading.list = false;
    },
    //通过
    changeStatus(agentId, status) {
      this.$confirm(`是否通过?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const { data } = await applyDrawal({
            orderId: agentId,
            status: 2
          });
          this.$message({
            type: "success",
            message: `通过成功!`
          });
         this.getLists();
        })
        .catch(() => {});
    },
    //编辑
    async editor(row) {
      this.dialog1.add = true;
      this.bindext.orderId = row.orderId;
      this.bindext.status = 3;
    },
    //驳回
    async editorApi() {
      try {
        if (!this.bindext.nayReason) {
          this.$message({
            type: "error",
            message: `驳回理由不能为空！!`
          });
          return;
        }
        const { data } = await applyDrawal({ ...this.bindext });
        this.$message({
          type: "success",
          message: `编辑成功!`
        });
        this.dialog1.add = false;
        this.getLists();
      } catch (error) {
        this.dialog1.add = false;
        this.$refs["bindForm"].resetFields();
      }
    },
    //申请提现
    async applyCash() {
      this.$refs["addForm"].validate(async valid => {
        if (valid) {
          this.loading.add = true;
          if (this.addQuery.amount > this.balance) {
            this.$message({
              type: "error",
              message: "输入金额不能大于可提现金额"
            });
            this.loading.add = false;
            return;
          }
          try {
            const { data } = await withdrawal(this.addQuery);
            // console.log(data);
            this.$message.success("申请成功");
            this.dialog1.cash = false;
            this.$refs["addForm"].resetFields();
            this.getAgentBalance();
            this.getLists();
          } catch (error) {}
          this.loading.add = false;
        }
        // console.log(valid);
      });
    },
    //查找
    handleFilter() {
      this.listQuery.offset = 1;
      this.getLists();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getLists();
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val;
      this.getLists();
    }
  },
  created() {
    this.getLists();
    this.getAgentBalance();
    this.userInfo = this.$store._modules.root._children.user.state.userInfo;
    this.managerTypes = this.userInfo.managerType;
    if (this.managerTypes == 3) {
      this.statuss = [{ status: 4, desc: "市代理" }];
    } else if (this.managerTypes == 4) {
      this.statuss = [{ status: 5, desc: "区代理" }];
    }
  }
};
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
